<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="jquery.mCustomScrollbar.css" />
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
	(function($) {
		$(window).load(function() {
			$("#component").mCustomScrollbar({
				theme : "minimal",
			});
			$("#minimal").mCustomScrollbar({
				theme : "minimal",
			});
			$("#rule").mCustomScrollbar({
				theme : "minimal",
			});
			$("#horizontal-content").mCustomScrollbar({
				axis : "x",
				theme : "3d"
			});
			$(".add-rule").hide();
			$("#hide").hide();
		});
	})(jQuery);

	function selectfact() {
		var fact1 = $("#selected option:selected").text();
		var fact = $("#selected").val();
		var curr = $("#rule_fact").val();
		if (curr.indexOf(fact) < 0) {
			if (curr != "") {
				curr = curr + ' ^ ' + fact;
			} else {
				curr = curr + fact;
			}
		}
		$("#rule_fact").val(curr);
	}

	function selectact() {
		var fact1 = $("#selected1 option:selected").text();
		var fact = $("#selected1").val();
		$("#rule_action").val(fact);
	}

	function checkRule() {
		var fact = $("#rule_fact").val();
		if (fact == null || fact == "") {
			alert("You must choose fact in list above!");
			return false;
		}
		var action = $("#rule_action").val();
		if (action == null || action == "") {
			alert("You must choose action in list above!");
			return false;
		}
		return true;
	}
	function submitForm(p) {
		if (checkRule()) {
			$(p).submit();
		}
	}

	function minus() {
		var old = $("#rule_fact").val();
		var index = old.lastIndexOf("^");
		if (index > 0) {
			$("#rule_fact").val(old.substring(0, index));
		} else {
			$("#rule_fact").val("");
		}
	}

	function open_form() {
		$("#show").toggle(400);
		$("#hide").toggle(400);
		$(".add-rule").toggle(400);
	}

	function close_form() {
		$("#hide").toggle(400);
		$("#show").toggle(400);
		$(".add-rule").toggle(400);
	}
</script>
<style type="text/css">
.top {
	width: 100%;
	min-width: 1024px;
	height: 280px;
}

.divider {
	width: 40%;
	height: 1px;
	background: #aaa;
	margin-left: 20px;
}

.fact {
	float: left;
	width: 250px;
	margin-left: 20px;
	margin-right: 30px;
	font-family: Tahoma;
	color: #aaa;
}

.title-fact {
	width: 100%;
	height: 40px;
	border-radius: 5px 5px 0px 0px;
	background-color: #333;
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

.title-fact span {
	height: 40px;
	line-height: 40px;
}

.content-fact {
	width: 250px;
	height: 200px;
	background-color: #333;
	border-radius: 0px 0px 5px 5px;
	color: #aaa;
	text-align: justify;
	padding: 10px;
	float: left;
	font-family: Tahoma;
	font-size: 13px;
}

.content-fact table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #aaa;
}

.content-fact table td, th {
	border: 1px solid #aaa;
	height: 30px;
}

.content-fact table th {
	text-align: center;
	background-color: #fff;
}

.content-fact table td.left {
	padding-left: 20px;
}

.content-fact table td.right {
	text-align: center;
}

.left-rule {
	width: 50px;
	text-align: center;
}

.add-rule {
	width: 870px;
	height: 150px;
	background-color: #333;
	border-radius: 5px;
	margin-left: 20px;
}

#selected {
	border-radius: 4px;
	border: none;
}

.ad-rule-title {
	width: 50%;
	height: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
}

.ad-rule-title span {
	display: block;
	width: 120px;
	height: 30px;
	line-height: 30px;
	float: left;
	font-family: Tahoma;
	color: #aaa;
}

.up-dow-btn {
	display: block;
	width: 30px;
	height: 30px;
	float: left;
}

#show {
	background: url("show.png") center no-repeat;
	background-color: #aaa;
	border-radius: 15px;
}

#hide {
	background: url("hide.png") 6px 8px no-repeat;
	background-color: #aaa;
	border-radius: 15px;
}
</style>
</head>
<%
	int size = 10;
	int rule_size = 200;
	int com_size = 15;
%>
<body>
	<div class="top">
		<div class="fact">
			<div class="title-fact">
				<span>Facts</span>
			</div>
			<div class="content-fact" id="minimal">
				<table>
					<thead>
						<tr>
							<th>Name</th>
							<th>ID</th>
						</tr>
					</thead>
					<tbody>
						<%
							for (int i = 0; i < size; i++) {
						%>
						<tr>
							<td class="left">name</td>
							<td class="right">id</td>
						</tr>
						<%
							}
						%>

					</tbody>
				</table>
			</div>
		</div>

		<div class="fact">
			<div class="title-fact">
				<span>Components</span>
			</div>
			<div class="content-fact" id="component">
				<table>
					<thead>
						<tr>
							<th>Name</th>
							<th>ID</th>
						</tr>
					</thead>
					<tbody>
						<%
							for (int i = 0; i < com_size; i++) {
						%>
						<tr>
							<td class="left">name</td>
							<td class="right">id</td>
						</tr>
						<%
							}
						%>
					</tbody>
				</table>
			</div>
		</div>

		<div class="fact">
			<div class="title-fact">
				<span>Rules</span>
			</div>
			<div class="content-fact" id="rule">
				<table>
					<thead>
						<tr>
							<th class="left-rule">STT</th>
							<th>Name</th>
							<th>Action</th>
						</tr>
					</thead>
					<tbody>
						<%
							for (int i = 0; i < rule_size; i++) {
						%>
						<tr>
							<td class="left-rule"><%=(i + 1)%></td>
							<td class="right">IF <%=" fact "%> THEN <%=" action"%></td>
							<td class="left"><a href="#">remove</a></td>
						</tr>
						<%
							}
						%>

					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="divider"></div>
	<div class="ad-rule-title">
		<span>Add new Rule</span> <a href="#" onclick="open_form()"
			class="up-dow-btn" id="show"></a><a href="#" onclick="close_form()"
			class="up-dow-btn" id="hide"></a>
	</div>

	<div class="add-rule">
		<table>
			<tbody>
				<tr>
					<td>Fact</td>
					<td><select id="selected" name="p12"
						style="HEIGHT: 30px; WIDTH: 200px" onchange="selectfact()">
							<%
								for (int i = 0; i < com_size; i++) {
							%>
							<option value="C<%=i%>">text<%=i%></option>
							<%
								}
							%>
					</select></td>
					<td>Action</td>
					<td><select id="selected1" name="p12"
						style="HEIGHT: 30px; WIDTH: 200px" onchange="selectact()">
							<%
								for (int i = 0; i < size; i++) {
							%>
							<option value="R<%=i%>">action<%=i%></option>
							<%
								}
							%>
					</select></td>
				</tr>
			</tbody>
			<tr></tr>
		</table>
		<form action="process.jsp" method="post" id="add_rule_form">
			<span>IF</span><input type="text" value="" id="rule_fact"
				readonly="readonly" name="RULE_FACT"><a href="#"
				onclick="minus()">Undo</a><span>THEN</span><input type="text"
				value="" id="rule_action" readonly="readonly" name="RULE_ACTION">
			<a href="#" id="" onclick="submitForm('#add_rule_form')">Add rule</a>
		</form>
	</div>
</body>
</html>